<!-- Author:Rain -->

<template>
    <div class="rain-form-item">
         <div class="rain-item-lable">
           <span>{{title}}</span>
         </div>
         <div class="rain-item-content">
           <input
             class="rain-target"
             :placeholder="placeholder"
             type="text"
             v-model="input"
             @blur="sendMsg"
           />
         </div>
       </div>
   </template>
   <!-- 
    1. 首先我们会在我们自定义的组件实现自己的一套风格样式
    
    -->
   
   <script setup lang="ts" name="rain-input">
   
   let props =defineProps(["placeholder","title","value"])
   let emit= defineEmits(["sendInput"])
   const {value}=markRaw(props)
   let input=ref(value)
   
   function sendMsg(){
       emit("sendInput",input.value)
   }
   
   </script>
   
   <style scoped>
   @import url("../css/formitems.css");
   </style>